<template>
  <div class="big-container">
     <el-button type="primary" @click="$router.push('/addworker')">添加负责人</el-button>
     <el-button @click="exportExcel">导出Excel</el-button>
    <!-- 表格区域 -->
    <div class="table">
      <el-table  style="width: 100%" :data="list" >
        </el-table-column>
        <el-table-column type="index" label="序号" width="160"   :index="indexMethod" />
        <el-table-column label="管道编号" width="250" prop="name" />
        <el-table-column label="负责人"  prop="contact" />
        <el-table-column
          width="220"
          label="联系电话"
          prop="contactNumber"
        />
        <el-table-column label="申请日期" prop="date" />
        <el-table-column label="申请时间" prop="time" />
      </el-table>
    </div>

    <div class="page-container">
      <el-pagination
        layout="sizes, prev, pager, next"
        :total="total"
        :page-sizes="[10, 20, 30, 40, 50]"
        :current-page="params.page"
        :page-size="params.pageSize"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>

<script>
import { getListAPI } from '@/api/worker'
import { utils, writeFileXLSX } from 'xlsx'
export default {
  data() {
    return {
      params: {
        page: 1,
        pageSize: 10
      },
      total: 0,
      list: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
          async exportExcel() {
      // 创建一个新的工作簿
      const workbook = utils.book_new()
      // 创建一个工作表 要求一个对象数组格式
      // 1. 获取当前要导出的table数据
      const res = await getListAPI(this.params)
      // 2. 按照需求调整数据的顺序
      const tableHeaderKeys = ['name', 'contact', 'contactNumber','date' ,'time']
      const tableHeaderValues = ['管道编号', '负责人', '联系电话', '申请日期','申请时间']
      // 以excel表格的顺序调整后端数据
      const sheetData = res.data.rows.map((item) => {
        const newObj = {} // 存放正确顺序的key-value
        tableHeaderKeys.forEach(key => {
          if (!key) {
            return
          } else {
            newObj[key] = item[key]
          }
        })
        return newObj
      })
      const worksheet = utils.json_to_sheet(sheetData)
      // 把工作表添加到工作簿  Data为工作表名称
      utils.book_append_sheet(workbook, worksheet, 'Data')
      // 改写表头
      utils.sheet_add_aoa(worksheet, [tableHeaderValues], { origin: 'A1' })
      // 导出方法进行导出
      writeFileXLSX(workbook, '负责人信息.xlsx')
    },
    indexMethod(index){
      return (this.params.page -1)*this.params.pageSize + index + 1
    },
    async getList() {
      const res = await getListAPI(this.params)
      this.list = res.data.rows
      this.total = res.data.total
    },
    // 分页
    handleCurrentChange(val) {
      this.params.page = val
      this.getList()
    },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.getList()
    },
  }
}
</script>
<style lang="scss" scoped>
.page-container{
  padding:8px 0px;
  text-align: right;
}

.big-container{
    margin: 40px 40px;

}

.table{
  margin-top: 20px;
}
</style>
